<template>
  <div class="goods-quan">
    <Curtain v-model="showContent" />
    <div class="content bg-white flex-col" v-if="showContent">
      <div class="title">
        <div class="title-lf">优惠券</div>
      </div>

      <div class="list flex-col">
        <div
          class="item flex-col"
          v-for="(quan, index) in couponList"
          :key="`quan${index}`"
          @tap="useCoupon(quan)"
        >
          <div class="left">
            <div class="quan-price ">
              <!-- <div class="headers">
                <div class="header-lf">
                  <text class="quan-num tag da">￥</text>
              <text class="quan-num">{{ quan.formValue }}</text>
                </div>
                <div class="header-ri">
                  <text class="msg">{{ quan.name }}</text>
                </div>
              </div> -->
              <div class="quan-numes">
                <text class="quan-tag">￥</text>
                <text class="quan-num2">{{ quan.formValue }}</text>
              </div>
              <div class="msg">{{ quan.name }}</div>
            </div>
            <div class="lefts-bu ">
              <div
                class="text text-numes"
                v-html="
                  quan.thresholdValue != null
                    ? '满' + parseFloat(quan.thresholdValue) + '元可使用'
                    : quan.thresholdValueString
                "
              >
                满{{ parseFloat(quan.thresholdValue) }}元可使用
              </div>
              <div class="text textes">
                {{ quan.starteEndTimeString }}
              </div>
            </div>
          </div>
          <div class="right items-center">
            <checkbox
            v-if="quan.id === selectId"
              value="0"
              :checked="checkeds"
              color="#4EB4FE"
              class="checkbox"
              @onChange="checkeds=!checkeds"
            />
            <checkbox
            v-if="quan.id !== selectId"
              value="0"
              :checked="checkeds"
              color="#4EB4FE"
              class="checkbox"
              @onChange="checkeds=!checkeds"
            />
          </div>
        </div>
      </div>
      <!-- <div class="list flex-col" v-if="currentIndex == '1'">
        <div
          class="item flex-col"
          v-for="(quan, index) in couponList"
          :key="`quan${index}`"
          @tap="useCoupons(quan)"
        >
          <div class="left flex-col">
            <div class="quan-price items-center">
              <text class="quan-num tag">￥</text>
              <text class="quan-num">{{ quan.voucherUseRuleLiteInfo.fixVoucher.amount }}</text>
              <text class="msg">{{ quan.voucherName }}</text>
            </div>
            <div class="text">
              订单金额满{{ quan.voucherUseRuleLiteInfo.fixVoucher.floorAmount }}元可使用
            </div>
            <div class="text">
              {{ quan.availableBeginTime }}至{{quan.availableEndTime}}
            </div>
          </div>
          <div class="right items-center">
            <checkbox
              :checked="quan.id === selectId"              
              color="#4EB4FE"
              class="checkbox"
            />
          </div>
        </div>
        
      </div> -->
      <span
      ref="noquan"
        class="tips flex justify-center items-center cor"
        v-if="couponList.length === 0"
      >
        暂无可用优惠券</span
      >
    </div>
  </div>
</template>
<script>
// import { AtToast } from "taro-ui"

export default {
  props: {
    selectId: "",
    info: {
      type: Object
    }
  },
  data() {
    return {
      couponList: [],
      showContent: false,
      currentIndex: "0",
      code: "",
      voucherId: "",
      checkeds: false,
      couponPrice: 0
    };
  },
  create() {
    this.getData(data);
    this.$nextTick(function() {
      this.$refs.noquan.show()
})
  },
  computed: {
    test: function() {
      if (!couponList) {
        setTimeout(function() {
          console.log(222);
          return this.couponList;
        }, 3000);
      }
    }
  },
  mounted(){
    setTimeout(() => {
      this.$refs.noquan.show()     
    }, 2000);
  },
  methods: {
    handleCheck(){
      console.log();
    },
    showCoupon(data) {
      this.showContent = true;
      this.getData(data);
      // this.getDataList(data);
      // this.getDataOrder(data);
      console.log(this.info, "101---");
    },
    // handleClick(ind) {
    //   this.currentIndex = ind;

    //   if (ind == "1") {
    //     console.log(ind,'103');
    //     this.getDataList()
    //   }else{
    //     this.getData();
    //     // this.getDataOrder()
    //   }
    //   console.log(ind,this.info, "51---");
    // },
    // getShang() {},
    // 商家卷
    // getDataList({ sessionId, code }) {

    //   my.getAuthCode({
    //     scopes: "voucher_query",
    //     success: res => {
    //       (this.code = res.authCode), console.log(this.code, "95---");
    //       this.$http
    //         .request({
    //           url: "/alipayShopCoupon/queryReceiveLog.json",
    //           data: {
    //             sessionId,
    //             code: this.code
    //           }
    //         })
    //         .then(({ data }) => {
    //           this.couponList = data;
    //           console.log(data,'138');
    //           this.voucherId=data.voucherId
    //         });
    //     }
    //   });
    // },
    // 商家卷优惠卷
    getData({ goodsId, allRentFee, rentDay, code, sessionId }) {
      my.getAuthCode({
        scopes: "voucher_query",
        success: res => {
          (this.code = res.authCode), console.log(this.code, "95---");
          this.$http
            .request({
              url: "/order/availableCoupon.json",
              data: {
                goodsId,
                allRentFee,
                rentDay,
                code: this.code,
                sessionId
              }
            })
            .then(({ data }) => {
              this.couponList = data;
            });
        }
      });
    },

    useCoupon(data) {
      this.showContent = false;
        this.$emit("use", data);
      // if (data.id === this.selectId) {
      //   this.$emit("use", {
      //     id: "",
      //     formValue: "",
      //     couponType: "",
      //     amount: "",
      //     floorAmount: ""
      //   });
      // } else {
      //   this.showContent = false;
      //   this.$emit("use", data);
      // }
    },
    // 商家卷
    // useCoupons(data) {
    //   if (data.id === this.selectId) {
    //     this.$emit("uses", {
    //       voucherId:"",
    //       amount: "" ,
    //       floorAmount: "",
    //       code:''
    //     });
    //   } else {
    //     this.showContent = false;
    //     this.$emit("uses", data);
    //   }
    // },
    receiveCoupon({ id, isReceive }) {
      this.$checkLogin().then(() => {
        if (isReceive === 1) {
          return;
        }
        this.$http
          .request({
            url: "/index/receiveCoupon.json",
            data: {
              couponId: id,
              storeId: this.storeId
            }
          })
          .then(() => {
            this.$store.dispatch("goods/getCouponList");
            this.$toast("领取成功", "success");
          });
      });
    }
  }
};
</script>
<style lang="scss">
.inlineBlock {
  display: inline-block;
  vertical-align: middle;
}

.goods-quan {
  .content {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    border-radius: 10px 10px 0 0;
    padding: 0 11px;
    max-height: 352px;
    min-height: 302px;
    z-index: 1002;
    overflow: auto;
    .active {
      display: none;
    }
    .title {
      display: flex;
      justify-content: center;
      width: 100%;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #474747;
      height: 56px;
      line-height: 58px;
    }
    .list {
      width: 100%;
      max-height: 246px;
      overflow-y: scroll;
      overflow-x: hidden;
      padding: 0 3px;
      border-radius: 5px;
      background-color: #ffffff;
      // background: url("../../../assets/tabbar-icon/未选中-优惠券背景.png") no-repeat center;
      .item {
        margin-bottom: 15px;
        position: relative;
        width: 349px;
        height: 95px;
        background-size: 100% 100%;
        background-position: center center;
        // background-image: url("https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/quan-bg.png");
        background-image: url("../../../assets/tabbar-icon/beijing1.png");
        // background: url("../../../assets/tabbar-icon/未选中-优惠券背景.png") no-repeat center;
        // background: #D8D8D8!important;
        .lists {
          height: 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        }
        .left {
          height: 100%;
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .quan-price {
            margin-top: 12px;
            display: flex;
            justify-content: flex-start;
            // .headers{
            //   display: flex;
            //   justify-content: flex-start;
            //   align-items: center;
            //   .header-lf{
            //   flex: 1 !important;
            // }
            // .header-ri{
            //   flex: 2 !important;
            // }
            // }

            .tag {
              font-size: 16px !important;
            }
            .da {
              font-size: 16px;
            }
            .quan-numes {
              width: 120px;
            }
            .quan-tag {
              width: 40px;
              font-family: MicrosoftYaHei;
              font-size: 20px;
              font-weight: normal;
              letter-spacing: 0em;
              color: #f03013;
            }
            .quan-num2 {
              font-size: 28px;
              font-weight: bold;
              color: #f03013;
              letter-spacing: 0em;
              font-family: MicrosoftYaHei-Bold;
            }
            .msg {
              font-size: 16px;
              color: #333333;
              line-height: 42px;
              height: 42px;
              font-family: MicrosoftYaHei;
              font-size: 16px;
              font-weight: normal;
              letter-spacing: 0em;
            }
          }
          .lefts-bu {
            display: flex;
            justify-content: flex-start;
            font-size: 8px !important;
          }
          .text {
            font-size: 10px;
            font-weight: normal;
            color: #666666;
            letter-spacing: 0em;
            font-family: MicrosoftYaHei;
            letter-spacing: 0em;
            // margin-top: -10px;
            height: 32px;
            line-height: 19px;
            // flex:1
          }
          .text-numes {
            width: 120px;
          }
          .textes {
            // margin-left: 24px!important;
            // flex:2
          }
        }
        .right {
          height: 100%;
          // width: 16px;
          position: absolute;
          top: 0;
          right: 31px;
          .checkbox {
            width: 16px;
            height: 16px;
            border-radius: 50%;
          }
          .get-quan {
            width: 98px;
            height: 32px;
            color: #fb5d5c;
            line-height: 34px;
          }
        }
      }
      .tips {
        width: 100%;
        height: 100%;
        font-size: 20px;
      }
    }
  }
}
</style>
